<template>
    <Scroll id="TabMenu">
      <div class="menu-list">
        <div class="menu-list-item" v-for="(item, index) in categories"
             @click="itemClick(index)"
             :class="{active:currentIndex==index}"
        >
          {{item.title}}
        </div>
      </div>
    </Scroll>
</template>

<script>
  import Scroll from "../../../components/common/scroll/Scroll";
    export default {
      name: "CategoryTabMenu",
      props:{
        categories:{
          type:Array,
          default(){
            return []
          }
        }
      },
      data(){
        return{
          currentIndex:0
        }
      },
      components:{
        Scroll
      },
      methods:{
        itemClick(index){
          this.currentIndex=index
          this.$emit('selectItem',index)
        }
      }
    }
</script>

<style scoped>
  #TabMenu{
    width: 100px;
    background-color: #f6f6f6;
    height: calc(100vh - 49px - 45px);
    overflow: hidden;
  }
  .menu-list{
    height: 100%;
  }
  .menu-list-item{
    height: 45px;
    width: 100%;
    text-align: center;
    line-height: 45px;
    font-size: 17px;
  }
  .active {
    font-weight: bold;
    color: black;
    background-color: #fff;
  }
</style>
